<template>
  <div class="page-containter">
    <uni-nav-bar fixed shadow :border="false" :title="detail && detail.practiceName || ''" left-icon="left" @clickLeft="onClickLeft"
                 v-if="navBarShow">
      <template #right>
        <button class="nav-bar-btn" type="primary" size="medium" round :loading="saveLoading" :disabled="btnStatus" @click="submit">提交</button>
      </template>
    </uni-nav-bar>

    <div class="common-wrap exam-wrap">
      <div class="test-wrap" v-if="currentExam">
        <exam
            :testItem="currentExam"
            :testIndex="answer[currentExam.paperQuestionsId].relative"
            :answer="answer[currentExam.paperQuestionsId].status"
            :type="type"
            :reply="true"
            @input="changeInput"
            @sureInput="sureVal"
            @changeIndex="changeIndex"
            @changeNote="changeNote"
            @changeCollect="changeCollect"
            :idkey="currentExam.paperQuestionsId"
            :val="answer[currentExam.paperQuestionsId].val"
            :total="total"
            :typeList="typeList"
            :videoShow="!simplifyShow && !showDialog"></exam>
        <div class="note-wrap fs-16" v-if="currentExam.isNote === '1' && (answer[currentExam.paperQuestionsId].status || this.type === '3')">
          <span class="fw-b fc-333">笔记：</span>
          <span class="fc-grey">{{currentExam.noteContent}}</span>
        </div>
      </div>
    </div>
    <div class="btn-wrap flex-wrap flex-middle" v-if="total && currentExam">
      <button
          round
          class="btn"
          type="primary"
          @click="changeIndex(answer[currentExam.paperQuestionsId].relative - 1)"
          v-if="answer[currentExam.paperQuestionsId] && answer[currentExam.paperQuestionsId].relative > 0">上一题</button>
      <button
          round
          class="btn"
          type="primary"
          plain
          disabled
          v-else>上一题</button>
      <div class="btn-text flex-item flex-wrap flex-middle flex-center" @click="changeSimplifyShow">
        <image class="btn-img" src="@/static/image/menu.png" />
          <span class="fs-14 fc-333">{{answer[currentExam.paperQuestionsId].relative + 1}}</span>
          <span class="fs-14 fc-ddd">/</span>
          <span class="fs-14 fc-999">{{total}}</span>
      </div>
      <button
          round
          class="btn"
          type="primary"
          @click="changeIndex(answer[currentExam.paperQuestionsId].relative + 1)"
          v-if="answer[currentExam.paperQuestionsId] && answer[currentExam.paperQuestionsId].relative < total - 1">下一题</button>
      <button
          round
          class="btn"
          type="primary"
          plain
          disabled
          v-else>下一题</button>
    </div>
    <van-popup v-model="simplifyShow" position="bottom" :style="{ height: '60%' }">
      <div class="simplify-wrap">
        <div class="common-wrap">
          <div class="simplify-top flex-wrap flex-middle">
            <button
                class="simplify-btn"
                type="primary"
                round
                @click="submit"
                :disabled="btnStatus">提交</button>
            <div class="flex-item"></div>
            <div class="flex-wrap flex-middle flex-center" @click="changeSimplifyShow">
              <image class="simplify-img" src="@/static/image/menu.png" />
                <span class="fs-14 fc-333">{{currentExam && answer[currentExam.paperQuestionsId].relative}}</span>
                <span class="fs-14 fc-ddd">/</span>
                <span class="fs-14 fc-999">{{total}}</span>
            </div>
          </div>
          <div class="simplify-data flex-wrap flex-middle mt10" v-if="type !== '3'">
            <div class="time-title flex-item flex-wrap flex-middle">
              <span class="fs-14 fc-000">答对：</span>
              <span class="fs-14 fc-primary">{{gather.right}}题</span>
            </div>
            <div class="time-title flex-item flex-wrap flex-middle">
              <span class="fs-14 fc-000">答错：</span>
              <span class="fs-14 fc-red">{{gather.err}}题</span>
            </div>
            <div class="time-title flex-item flex-wrap flex-middle">
              <span class="fs-14 fc-000">正确率：</span>
              <span :class="['fs-14', (gather.rate > 60 && 'fc-success') || 'fc-red']">{{gather.rate}}%</span>
            </div>
          </div>
        </div>
        <div class="simplify-bottom">
          <div class="time-bottom flex-wrap flex-text-mid">
            <span class="time-bottom-item active-0">未做</span>
            <span class="time-bottom-item active-1">正确</span>
            <span class="time-bottom-item active-2">错误</span>
            <span class="time-bottom-item active-3">待阅</span>
            <span class="time-bottom-item active-4">已阅</span>
          </div>
          <div class="test-list">
            <div class="test-item-wrap" v-for="(item,index) in simplify" :key="index">
              <div class="test-title font-14 font-bold">{{item.name}}</div>
              <div class="test-list-wrap">
                                <span
                                    :class="['test-item',
                                currentExam && answer[currentExam.paperQuestionsId] && answer[currentExam.paperQuestionsId].relative + 1 === it.relative ? 'current' : '',
                                answer[it.questionsId].flag ? 'select' : '',
                                answer[it.questionsId].status ? 'active-' + answer[it.questionsId].status : '']"
                                    v-for="(it,ind) in item.child"
                                    @click="handleMove(it.questionsId)"
                                    :key="ind">{{it.relative}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
    <van-action-sheet v-model="showDialog" :title="noteType == 1 ? '编辑笔记' : '添加笔记'">
      <div class="content-body">
        <van-form @submit="handleConfirm" ref="form">
          <van-field
              v-model="form.content"
              :rows="3"
              autosize
              label=""
              label-width="0"
              type="textarea"
              placeholder="请输入内容"
              name="content"
              :rules="[{ required: true, message: '请输入内容' }]"
          />
          <div class="content-btn-wrap flex-wrap flex-middle">
            <button
                round
                class="btn"
                type="primary"
                plain
                @click="handleClose">取消</button>
            <button
                round
                class="btn"
                type="primary"
                @click="handleConfirm">保存</button>
          </div>
        </van-form>
      </div>
    </van-action-sheet>
  </div>
</template>
<script>
import {sha256} from "js-sha256";
import exam from '@/view/practice/exam.vue'
import { parse, stringify, copyBasic, deepClone, getFormTime, getCurrentTime } from '@/assets/js/util.js'
import VanPopup from "@/components/vant/van-popup/van-popup.vue";
import VanActionSheet from "@/components/vant/van-action-sheet/van-action-sheet.vue";
import VanForm from "@/components/vant/van-form/van-form.vue";
import VanField from "@/components/vant/van-field/van-field.vue";
import mockData from "@/mock/practice/detail.json"
import typeMock from "@/mock/practice/type.json"
export default {

  head() {
    return {
      title: this.detail && this.detail.name
    }
  },
  data() {
    return {
      navBarShow: false,
      unit: 3,// 上下获取单元
      fullscreenLoading: true,
      id: '',
      type: '',
      iscontinue: 1,
      detail: {},
      exam: {},
      simplify: [],
      answer: {},
      listAll: [],
      total: 0,
      timer: null,
      recordTime: null,
      reTime: 120,
      time: 60, // 60秒保存一次
      currentTime: 0,
      noAction: 0,
      btnStatus: false,
      saveLoading: false,
      showDialog: false,
      simplifyShow: false,
      form: {
        pwd: '',
      },
      rules: {
        content: [
          { required: true, message: '请输入内容', trigger: ['change', 'blur'] }
        ]
      },
      currentId: '',
      noteType: 0,
      currentExam: null,
      typeList: []
    }
  },
  onLoad(query) {
    this.navBarShow = true
  },
  onUnload() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  mounted() {
    this.getInfo()
      this.getTypeList()
  },
  onNavigationBarButtonTap() {
    if (!this.btnStatus && !this.saveLoading) {
      this.submit()
    }
  },
  components: {
    VanField,
    VanForm,
    VanActionSheet,
    VanPopup,
    exam
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
    if (this.recordTime) {
      this.handleRecord()
      clearInterval(this.recordTime)
    }
  },
  computed: {
    gather () {
      let right = 0, err = 0, total = 0
      for (let i in this.answer) {
        if (this.answer[i].status == 1) {
          right++
          total++
        } else if (this.answer[i].status == 2) {
          err++
          total++
        }
      }
      return {
        right: right,
        err: err,
        rate: total ? Math.round(right/total*10000)/100 : 0
      }

    }
  },
  watch: {

    currentId(id) {
      if (!this.answer || !this.answer[id]) {
        return false
      }
      let ids = this.getIds(this.answer[id].relative)
      if (!this.listAll[id] && ids) {
        this.getQuestion(ids, () => {
          this.currentExam = this.listAll[id]
        })
      } else if (ids) {
        this.getQuestion(ids)
        this.currentExam = this.listAll[id]
      } else {
        this.currentExam = this.listAll[id]
      }
    }
  },
  methods: {
    onClickLeft() {
      uni.navigateBack({ delta: 1 })
    },

    changeSimplifyShow() {
      this.simplifyShow = !this.simplifyShow
    },

    getIds(index) {
      let start = index - this.unit >= 0 ? index - this.unit : 0,
          end = index + this.unit <= this.total ? index + this.unit : this.total,
          arr = []
      console.log(index, start, end)
      for (start;start <= end; start++){
        if (!this.listAll[this.questionsList[start]]) {
          arr.push(this.questionsList[start])
        }
      }
      return arr.join(',')
    },
    handleDefault() {
      window.onkeydown = window.onkeyup = window.onkeypress = function (event) {
        if (event.keyCode === 123) {
          event.preventDefault()
          window.event.returnValue = false
        }
      }
      window.oncontextmenu = function() {
        event.preventDefault()
        return false
      }
    },
    // 上页下页
    changeIndex (page) {
      for (let i = 0; i < this.simplify.length; i++) {
        if (this.simplify[i].child.length) {
          for (let j = 0; j < this.simplify[i].child.length; j++) {
            if (page + 1 === this.simplify[i].child[j].relative) {
              this.currentId = this.simplify[i].child[j].questionsId
              break
            }
          }
        }

      }
    },
    // 处理移动
    handleMove(id) {
      this.currentId = id
    },
    // 整理问题、问题右侧列表、答案列表
    setIndex(list, key, questions=[]) {
      let index = 0
      let arr = []
      let simplify = []
      let questionsList = []
      let answer = {}
      if (list.length) {
        list.map((e,i) => {
          let sim = {
            name: e.name,
            id: 'parent' + i,
            child: []
          }
          e[key] = e[key] || []
          e[key] = e[key].map((item, ind) => {
            item.index = index
            questionsList.push(item.paperQuestionsId)
            answer[item.paperQuestionsId] = {
              type: item.questionsType,
              flag: false,
              part: i,
              index: ind,
              relative: index,
              location: 'child' + index,
              status: parseInt(item.status),
              val: item.questionsType === 'M' || item.questionsType === 'F' ? [] : ''
            }
            sim.child.push({
              parent: i,
              absolute: ind,
              relative: index + 1,
              id: 'child' + index,
              status: parseInt(item.status),
              questionsId: item.paperQuestionsId
            })
            index++
            return item
          })
          simplify.push(sim)
          return e
        })
      }
      if (questions.length) {
        questions.map(e => {
          arr[e.paperQuestionsId] = deepClone(e)
          if (e.fromQuestionsType === 'R' || e.fromQuestionsType === 'T') {
            answer[e.paperQuestionsId].answer = e.optionsDtoList.filter(item => item.isRightAnswer === '1').map(item => item.paperQuestionsOptionsId).join('')
          } else if (e.fromQuestionsType === 'M') {
            answer[e.paperQuestionsId].answer = e.optionsDtoList.filter(item => item.isRightAnswer === '1').map(item => item.paperQuestionsOptionsId)
          }
          answer[e.paperQuestionsId].val = this.setAnswer(e, answer)
        })
      }
      return {
        total: index,
        questionsList: questionsList,
        list: arr,
        simplify: simplify,
        answer: answer
      }
    },
    getTypeList() {
        let arr = typeMock.data
        let typeList = []
        arr.forEach(e => {
          typeList[e.typeId] = e.name
        })
        this.typeList = typeList
    },
    // 详情
    getInfo() {
      this.fullscreenLoading = true
		  let res=mockData.data;
        let listData = this.setIndex(res.simpleQuestionListWithArray, 'simpleQuestionsList', res.questionsDtoList)
        this.detail = res
        this.listAll = listData.list
        this.simplify = listData.simplify
        this.answer = listData.answer
        this.questionsList = listData.questionsList
        this.total = listData.total
        this.currentId = res.presentQuestionId
        uni.setNavigationBarTitle({
          title: this.detail.practiceName
        })
        this.fullscreenLoading = false
    },
    // 获取答题
    getQuestion(id, fn) {
      if (fn) this.fullscreenLoading = true
      this.$api.practice.userSearch({
        practiceId: this.id,
        recordId: this.detail.recordId,
        paperQuestionsIds: id
      }).then(res => {
        this.fullscreenLoading = false
        if (res && res.length){
          res.map(e => {
            this.listAll[e.paperQuestionsId] = deepClone(e)
            if (e.fromQuestionsType === 'R' || e.fromQuestionsType === 'T') {
              this.$set(this.answer[e.paperQuestionsId], 'answer', e.optionsDtoList.filter(item => item.isRightAnswer === '1').map(item => item.paperQuestionsOptionsId).join(''))
            } else if (e.fromQuestionsType === 'M') {
              this.$set(this.answer[e.paperQuestionsId], 'answer', e.optionsDtoList.filter(item => item.isRightAnswer === '1').map(item => item.paperQuestionsOptionsId))
            }
            this.$set(this.answer[e.paperQuestionsId], 'val', this.setAnswer(e, this.answer))
          })
        }
        if (fn) fn()
      }).catch(e => {
        this.fullscreenLoading = false
      })
    },
    // 输入多选处理
    checkArr(current, target) {
      if (!Array.isArray(current) || !Array.isArray(target)) {
        return false
      }
      if (current.length === target.length) {
        let arr = current.filter(e => target.findIndex(i => i === e) >= 0)
        return arr.length === current.length
      } else {
        return false
      }
    },
    // 输入处理
    changeInput(key, val) {
      if (this.answer[key].type === 'M' && val.length) {
        this.answer[key].flag = true
      } else if (this.answer[key].type === 'F' && val.length && val.filter(e => e).length) {
        this.answer[key].flag = true
      } else if (this.answer[key].type !== 'M' && this.answer[key].type !== 'F' && val) {
        this.answer[key].flag = true
      } else {
        this.answer[key].flag = false
      }
      this.answer[key].val = val
      if (this.answer[key].type === 'T' || this.answer[key].type === 'R') {
        this.sureVal(key, val, true)
      }
    },
    sureVal (key, val, save) {
      if (this.answer[key].type === 'M' && val && val.length) {
        this.answer[key].status = this.checkArr(this.answer[key].answer, val) ? 1 : 2
      } else if ((this.answer[key].type === 'R' || this.answer[key].type === 'T') && val) {
        let answer = this.answer[key].answer.replace(',', '')
        this.answer[key].status = answer === val ? 1 : 2
      } else if (this.answer[key].type === 'F' && val.length && val.filter(e => e).length) {
        this.answer[key].status = 1
      } else if (this.answer[key].type === 'A' && val) {
        this.answer[key].status = 1
      } else if ((this.answer[key].type === 'A' || this.answer[key].type === 'F') && (val && !val.length || !val)) {
        this.$toast.warning('请输入内容')
        this.answer[key].status = 0
      } else {
        this.answer[key].status = 0
      }
    },
    handleRecord() {
      if (this.currentTime && this.detail.recordId) {
        let time = this.currentTime
        this.$api.practice.userTime({
          recordId: this.detail.recordId,
          useTime: time
        }).then(res => {
          this.currentTime = 0
        })
      }
    },
    // 解析上次答案
    setAnswer(current, answer) {
      let val
      if (!current.answerDto) {
        return answer[current.paperQuestionsId].val
      }
      if (current.fromQuestionsType === 'M') {
        val = current.answerDto.answerOptionsId ? current.answerDto.answerOptionsId.split(',') : []
      } else if (current.fromQuestionsType === 'R' || current.fromQuestionsType === 'T') {
        val = current.answerDto.answerOptionsId || ''
      } else if (current.fromQuestionsType === 'F') {
        let content = current.answerDto.answerContent ? current.answerDto.answerContent.replace(/,$/, '').slice(2,-2) : ''
        val = content.split(']],[[')
      } else {
        val = current.answerDto.answerContent || ''
      }
      return val
    },
    // 获取提交答案
    getJson(current, flag){
      let filled = [],
          unfilled = []
      for (let id in current) {
        if (current[id].flag && (current[id].type === 'R' || current[id].type === 'T')){
          filled.push({
            paperQuestionsId: id,
            answerOptionsId: current[id].val,
            affirmFlag: current[id].status || 0
          })
        } else if (current[id].flag && current[id].type === 'M') {
          filled.push({
            paperQuestionsId: id,
            answerOptionsId: current[id].val.join(','),
            affirmFlag: current[id].status || 0
          })
        } else if (current[id].flag && current[id].type === 'F') {
          filled.push({
            paperQuestionsId: id,
            answerOptionsId: '',
            answerContent: '[[' + current[id].val.join(']],[[') + ']]',
            affirmFlag: current[id].status || 0
          })
        } else if (current[id].flag && current[id].type === 'A') {
          filled.push({
            paperQuestionsId: id,
            answerOptionsId: '',
            answerContent: current[id].val,
            affirmFlag: current[id].status || 0
          })
        }
        // 未作答
        if (flag && !current[id].flag) {
          unfilled.push({
            part: current[id].part,
            index: current[id].index,
            location: current[id].location
          })
        }
      }
      if (flag) {
        return {
          filled,
          unfilled
        }
      }
      return filled
    },
    submit() {
    this.$toast.success('提交成功')
    uni.navigateBack({ delta: 1 })
    },
    changeCollect(type) {
     this.$toast.fail('收藏失败')
    },
    changeNote(type) {
      this.noteType = type
      this.showDialog = true
      if (type == 1) {
        this.$set(this.form, 'content', this.currentExam.noteContent || '')
      } else {
        this.form = {}
      }
    },
    handleClose() {
      this.showDialog = false
      this.form = {}
      this.$refs['form'].resetValidation()
    },
    handleConfirm(valid) {
      if (valid) {
       this.$toast.success('编辑笔记成功')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.page-containter {
  .van-nav-bar{
    box-shadow: inset 0px -1px 0px 0px rgba(221,221,221,0.5);
  }
  .nav-bar-btn{
    width: 60px;
    height: 28px;
    white-space: nowrap;
  }
  .page-header{
    position: raletive;
    height: 68px;
    background: #FFFFFF;
    .callback{
      position: absolute;
      width: calc((100% - 1200px)/2);
      min-width: 90px;
      text-align: right;
      &:before{
        content: '';
        display: block;
        width: 7px;
        height: 7px;
        position: absolute;
        border-left: 1px solid #333;
        border-bottom: 1px solid #333;
        -webkit-transform: translate(0, -50%) rotate(45deg);
        transform: translate(0, -50%) rotate(45deg);
        top: 50%;
        left: 30px;
      }
    }
  }
  .page-title{
    padding: 40px 0;
    line-height: 34px;
    text-align: center;
  }
  .common-wrap{
    position: relative;
    width: 100%;
    margin: 0 auto;
    &.exam-wrap{
      padding: 0 15px 60px;
    }
    .test-wrap{
      .test-title{
        padding: 20px 0 5px;
        font-size: 16px;
      }
      .note-wrap{
        padding: 14px 0;
        line-height: 22px;
        border-top: 1px dashed #EEEEEE;
      }
    }
  }
  .simplify-wrap{
    .test-title{
      font-size: 14px;
      color: #999;
      cursor: pointer;
      padding: 0 0 10px;
      transition: color 0.3s;
      word-break: break-all;
      &:hover{
        color: #1EA69D;
      }
    }
    .right-top{
      padding: 0 20px;
      background: #fff;
      margin-bottom: 20px;
      .time-title{
        height: 50px;
        &:not(:last-child){
          border-bottom: 1px solid #EEEEEE;
        }
      }
    }
    .simplify-top{
      height: 54px;
      background: #FFFFFF;
      border-bottom: 1px solid #EEEEEE;
      .simplify-btn{
        width: 60px;
        height: 36px;
        border-radius: 18px;
		font-size: 14px;
      }
      .simplify-img{
        width: 18px;
        height: 18px;
        margin-right: 6px;
      }
    }
    .simplify-bottom{
      background: #fff;
    }
    .test-list{
      max-height: calc(60vh - 104px);
      overflow: auto;
    }
    .test-item-wrap{
      padding: 0 15px 30px;
    }
    .test-item{
      display: inline-block;
      width: 42px;
      height: 42px;
      font-size: 16px;
      color: #333;
      line-height: 40px;
      background: #FFFFFF;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s;
      border-radius: 50%;
      border: 1px solid #EEEEEE;
      &:hover{
        color: #1EA69D;
        border-color: #1EA69D;
      }
      &:not(:nth-child(6n + 1)){
        margin-left: 18px;
      }
      &:nth-child(n + 7){
        margin-top: 18px;
      }
      &.select{
        background: #DDDDDD;
      }
      &.current{
        color: #1EA69D;
        border: 1px solid #1EA69D;
      }
      &.active-1{
        color: #1EA69D;
        background: rgba(30,166,157,0.14);
        border-color: rgba(30,166,157,0.14);
      }
      &.active-2{
        color: #DF0000;
        background: rgba(223,0,0,0.14);
        border-color: rgba(223,0,0,0.14);
      }
      &.active-3{
        color: #F1C82C;
        background: rgba(241,200,44,0.14);
        border-color: rgba(241,200,44,0.14);
      }
      &.active-4{
        color: #E8881D;
        background: rgba(232,136,29,0.14);
        border-color: rgba(232,136,29,0.14);
      }
    }
    .time-bottom{
      padding: 15px;
      .time-bottom-item{
        color: #333;
        font-size: 12px;
        &:before{
          content: '';
          display: inline-block;
          width: 8px;
          height: 8px;
          background: #FFFFFF;
          margin-right: 6px;
          border-radius: 50%;
        }
        &:not(:first-child):before{
          margin-left: 15px;
        }
        &:nth-child(1):before{
          border: 1px solid #bbb;
        }
        &:nth-child(2):before{
          background: #1EA69D;
        }
        &:nth-child(3):before{
          background: #DF0000;
        }
        &:nth-child(4):before{
          background: #F1C82C;
        }
        &:nth-child(5):before{
          background: #E8881D;
        }
      }
    }
  }
  .btn-wrap{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 54px;
    padding: 0 20px;
    background: #fff;
    border-top: 1px solid #EEEEEE;
    .btn{
      width: 100px;
      height: 40px;
      border-radius: 20px;
    }
    .btn-text{
      padding: 10px 0;
      .btn-img{
        width: 18px;
        height: 18px;
        margin-right: 6px;
      }
    }
  }
  .submit-wrap{
    position: fixed;
    left: calc(50% - 142.5px);
    top: calc(50% - 132px);
    width: 285px;
    height: 264px;
    padding: 20px 15px;
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid #979797;
    &.progress-wrap{
      height: 224px;
    }
    .submit-title{
      text-align: center;
    }
    .submit-body{
      padding: 20px 0 0;
      .van-circle{
        display: block;
        margin: 0 auto;
        position: relative;
      }
      .circle-text{
        position: absolute;
        padding-top: 24px;
        width: 100%;
        height: 100%;
        padding-top: calc(50% - 24px);
        .fs-12{
          margin-bottom: 3px;
        }
      }
      .submit-btn{
        padding: 20px 0 0;
        .btn{
          width: 120px;
          height: 40px;
          border-radius: 20px;
          &.btn-grey{
            color: #666;
            background: #F5F5F5;
            border-color: #F5F5F5;
          }
          &+ .btn{
            margin-left: 15px;
          }
        }
      }
    }
  }
  .form-field{
    padding: 0 20px;
    margin: 15px 0;
    &.code{
      :deep(.van-cell__value){
        padding: 0 0 0 10px;
      }
    }
    &.van-cell::after{
      border: none;
    }
    :deep(.van-cell__title){
      width: 5.1em;
    }
    :deep(.van-cell__value){
      padding: 5px 10px;
      border: 1px solid #EEEEEE;
      border-radius: 4px;
    }
    .valicode {
      cursor: pointer;
      width: 90px;
      height: 38px;
      margin-left: 20px;
    }
    .van-button--primary{
      color: #1EA69D;
      background-color: #fff;
      border: none;
      &.van-button--disabled{
        color: #c0c4cc;
      }
    }
  }
  .title{
    padding: 10px 0;
    text-align: center;
  }
}
.content-body{
  :deep(.van-field__body){
    padding: 15px 20px;
    border: 1px solid #EEEEEE;
    .van-field__control{
      background-color: #F6F6F6 !important;
    }
  }
  .van-cell::after{
    border: none;
  }
  .content-btn-wrap{
    width: 100%;
    height: 54px;
    padding: 0 20px;
    background: #fff;
    .btn{
      flex: 1;
      height: 40px;
      & + .btn{
        margin-left: 10px;
      }
    }
  }
  :deep(.van-field--error) .van-field__control::placeholder {
    color: #cdcdcd !important;
  }
}
</style>
